<template>
  <div>
    <h2>轮播图管理</h2>
    <div style="margin-top:15px;border-bottom: 1px solid #e1e1e1;width:100%"></div>
    <h3 class="margin-top-ershi">添加轮播图</h3>
      <Form :model="submitData" label-postion="top" class="margin-top-ershi">
      <FormItem label="轮播图图片">
        <div class="demo-upload-list" v-for="item in uploadList" :key="item.uploadList">
          <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </template>
          <template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
          </template>
        </div>
        <Upload
          ref="upload"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="100"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :show-upload-list="false"
          type="drag"
          action="https://www.chuyinkeji.cn/ops/filesystem/upfile"
          style="display: inline-block;width:58px;"
        >
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
        <Modal title="查看图片" v-model="visible">
          <img :src="imgUrl" v-if="visible" style="width: 100%">
        </Modal>
      </FormItem>
        <FormItem label="跳转路径">
          <div style="font-size:12px;">店铺统一开头路径：/pages/index/item/menu/menu?shopid=</div>
          <div style="font-size:12px;">图文统一开头路径：/pages/richText/richText?id=</div>
          <Input v-model="submitData.path" placeholder="请输入分类名称"></Input>
        </FormItem>
      </Form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add()">添 加</el-button>
      </span>
      <h3 class="margin-top-sanshi">轮播图列表</h3>
    <el-table :data="data" style="width: 100%;margin-top:15px">
      <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column  label="轮播图图片"> 
                <template slot-scope="scope">
                  <img :src="scope.row.image" height="50px" width="200px" alt="">
                </template>
            </el-table-column>
            <el-table-column  prop="path" label="跳转路径" ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button class="el-dropdown-link" type="text">
              操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div style="width:100px" @click="zhiding(scope.row.id)">置顶</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="width:100px" @click="update(scope.row.id)">删除</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="flexr-end" style="margin-top:20px">
      <Page
        :total="total"
        :current="1"
        :page-size="10000"
        show-sizer
        show-total
      />
    </div>
 

  </div>
</template>
<style>
@import url("../../assets/css/component.css");
</style>
<script>
var that;
export default {
  data() {
    return {
      data: [],
      total: 0,
      getDataListquery: {
        schoolId: sessionStorage.getItem("schoolId")
      },
      submitData: {
        image: "",
        path: '',
        schoolId: sessionStorage.getItem("schoolId")
      },
      imgUrl:'',
      visible: false,
      defaultList: [{name:'a42bdcc1178e62b4694c830f028db5c0',
      url:'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'}
      ],
      uploadList: []
    };
  },
  mounted() {
    that = this;
    this.uploadList = this.$refs.upload.fileList;
    this.getDataList();
  },
  methods: {
    //查询轮播图
    getDataList() {
      this.$http
        .get(
          this.com.NODE_API + "/ops/slide/find",{
          params:this.getDataListquery,
          headers: { token: sessionStorage.getItem("token") },
          emulateJSON: true
        }
        )
        .then(res => {
          if (res.data.code) {
            that.data = res.data.params.list;
            that.total = res.data.params.list.length;
          } else {
            that.$message({
              showClose: true,
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    update(id) {
        this.$confirm(
          "此操作将永久删除该数据, 是否继续? 若误删请联系开发人员",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          this.$http
            .post(
              this.com.NODE_API + "/ops/slide/update",
              { id: id, status: 1 },
              {
                headers: { token: sessionStorage.getItem("token") },
                emulateJSON: true
              }
            )
            .then(res => {
              if (res.data.code) {
                that.$message({
                  showClose: true,
                  type: "success",
                  message: '删除成功'
                });
                this.getDataList();
              } else {
                that.$message({
                  showClose: true,
                  type: "error",
                  message: res.data.msg
                });
              }
            });
        });
    },
    zhiding(id) {
      var  date1 =new Date();
      this.$http
        .post(
          this.com.NODE_API + "/ops/slide/update",
          { id: id, sort: (Date.parse(date1)) ,status: 0},
          {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          }
        )
        .then(res => {
          if (res.data.code) {
            that.$message({
              showClose: true,
              type: "success",
              message: "置顶成功"
            });
            this.getDataList();
          } else {
            that.$message({
              showClose: true,
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    handleView(url) {
      this.imgUrl = url;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url = res;
      this.submitData.image = res;
    },
    handleFormatError(file) {
      that.$message({
        showClose: true,
        type: "error",
        message: "只限于传jpg,jpeg,png三种图片类型"
      });
    },
    handleMaxSize(file) {
      that.$message({
        showClose: true,
        type: "error",
        message: "上传文件过大，请小于100kb"
      });
    },
    add() {
        this.$http
          .post(this.com.NODE_API + "/ops/slide/add", this.submitData, {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          })
          .then(res => {
            if (res.data.code) {
                that.$message({
                showClose: true,
                type: "success",
                message: '添加成功'
                });
                this.$router.push({ path: "/supplierAllBack" });
            } else {
              that.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
          });
    },
  }
};
</script>
